<template>
	<view class="page-container">
		<view class="voucher">
			<img class="icon" src="@/static/images/icon-di.png">
			<view class="title">
				<view style="font-size: 34rpx;;">代年检服务券</view>
				<view style="font-size: 24rpx; color: rgba(0,0,0,.73)">限7座及以下家用车折扣使用</view>
			</view>
			<view class="num">
				<span style="font-size: 48rpx;">1</span>
				<span>张</span>
			</view>
		</view>
		<view class="form">
			<view class="form-item">
				<label>选择下单平台</label>
				<select v-model="form.order_platform" placeholder="请选择下单平台">
					<option value="" label="请选择下单平台">请选择下单平台</option>
					<option value="京东" label="京东">京东</option>
					<option value="淘宝" label="淘宝">淘宝</option>
					<option value="公众号" label="公众号">公众号</option>
					<option value="抖音" label="抖音">抖音</option>
				</select>
			</view>
			<view class="form-item">
				<label>姓名</label>
				<input type="text" v-model="form.name" placeholder="收货人姓名" />
			</view>
			<view class="form-item">
				<label>下单手机号</label>
				<input type="tel" v-model="form.phone_number" placeholder="收货人手机号"/>
			</view>
			<view class="form-item">
				<button @click="submit">提交领取</button>
			</view>
		</view>
		<view class="logs">
			<view class="logs-title">提交记录</view>
			<ul>
				<li v-for="record in records">
					<view style="display:flex;justify-content: space-between;"><span>{{$u.timeFormat(record.created, 'yyyy-mm-dd hh:MM:ss')}}</span><span>{{record.state_txt}}</span></view>
					<view class="info">{{record.order_platform}}/{{record.name}}/{{record.phone_number}}</view>
				</li>
			</ul>
		</view>
		<wx-share :title='shop.name' :desc="shop.store_introduction" :imgUrl="shop.cover" :link="currentPage" ref="wxs"></wx-share>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				currentPage: location.href,
				records:[],
				form:{
					order_platform:''
				},
				shop: {}
			}
		},
		created(){
			this.getShop()
			this.fetchRecords()
		},
		methods: {
			fetchRecords(){
				this.$u.post('/voucher/get-voucher-application-log', {}).then(res => {
					this.records = res
				}).catch(e => {
				})
			},
			submit(){
				if(!this.form.order_platform || !this.form.phone_number){
					return this.$refs.uToast.show({
						title: '请填写下单信息',
						type: 'error'
					})
				}
				this.$u.post('/voucher/submit-voucher-application', this.form).then(res => {
					this.fetchRecords()
					this.form.name = ''
					this.form.phone_number = ''
					this.$refs.uToast.show({
						title: '提交成功，等待处理',
						type: 'success'
					})
				}).catch(e => {

				})
			},
			getShop() {
				this.$u.post('/shopping/shop-setting', {}).then(res => {
					this.shop = res;
				}).catch(e => {

				})
			},
		}
	}
</script>

<style scoped>
.page-container{
	padding: 30rpx;
}
.voucher{
	padding: 30rpx;
	border: 1px solid #F6F6F6;
	border-radius: 10rpx;
	display:flex;
	background-color: #fff;
	align-items: center;
	margin-bottom: 30rpx;
	box-shadow: 0 1px 8px 1px rgba(0,0,0,.1);
}
.voucher .icon{
	width: 100rpx;
	height: auto;
}
.voucher .title{
	padding: 0 30rpx;
	flex: 1;
}
.voucher .num{
	width: 50rpx;
	color: red;
}
.form{
	padding: 30rpx;
	background-color: #fff;
	border-radius: 10rpx;
	box-shadow: 0 1px 8px 1px rgba(0,0,0,.1);
}
.form-item{
	display: flex;
	align-items: center;
	line-height: 2.5;
	margin-bottom: 20rpx;
}
.form-item:last-child{
	margin-bottom: 0;
}
.form-item label{
	width: 200rpx;
}
.form-item select, .form-item input{
	flex: 1;
	border: none;
	border-bottom: 1px solid #eee;
	padding: 10rpx;
	box-sizing: border-box;
	height: 64rpx;
}
.form-item button{
	background-color: red;
	color: #fff;
	font-size: 34rpx;
	padding: 0 100rpx;
	margin: 30rpx auto;
}
.logs{
	padding: 30rpx;
}
.logs-title{
	margin: 30rpx 80rpx;
	padding-bottom: 20rpx;
	text-align: center;
	border-bottom: 1px solid #ccc;
}
.logs ul{
	text-decoration: none;
	padding: 0;
}
.logs ul li{
	list-style: none;
	margin-bottom: 20rpx;
}
.logs .info{
	line-height: 2;
	color: rgba(0,0,0,.73);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
</style>
